:-moz-drag-over

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

The :-moz-drag-over CSS pseudo-class is a Mozilla extension that matches an element when a dragover event is called on it.

Syntax

css
:-moz-drag-over {
  /* ... */
}

Examples

HTML

html
<div id="drop-target">
  <p>Drop target</p>
</div>

<div draggable="true">
  <p>Draggable</p>
</div>

JavaScript

Most elements are not valid places to drop data, so in order to allow a drop, you must prevent default behavior by cancelling dragenter or dragover (or both) events. In this example, we only need to cancel the dragenter event, which is the first event fired when the browser evaluates if an element can be a drop target. For more information, see Drag operations: Specifying drop targets.

js
const target = document.getElementById("drop-target");
/* dragenter event fired on the drop target */
target.addEventListener(
  "dragenter",
  (event) => {
    // prevent default to allow drop
    event.preventDefault();
  },
  false,
);

CSS

css
body {
  font-family: arial;
}
div {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 2px dotted black;
  background-color: aquamarine;
  margin: 1rem;
}
p {
  padding: 1rem;
}

The following CSS changes the drop target color to red when the draggable element overlays the drop area.

css
#drop-target {
  background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
  background-color: red;
}

Result

Specifications

Not part of any standard.

See also